<template>
  <el-form
    label-position="right"
    label-width="110px"
    :model="form"
    :rules="rules"
    ref="pcBtnFrom"
  >
    <el-form-item
      label="功能名称"
      prop="name"
    >
      <el-input
        v-model="form.name"
        placeholder="请输入功能名称"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="功能权限值"
      prop="authorityName"
    >
      <el-input
        v-model="form.authorityName"
        placeholder="应用名称:菜单名称:功能权限值，如系统管理应用:用户管理菜单:新增用户（systemManage:userManage:add）"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="类型"
      prop="type"
    >
      <el-radio-group v-model="form.type">
        <el-radio
          :disabled="type === 2"
          :label="1"
        >仅功能</el-radio>
        <el-radio
          :disabled="type === 2"
          :label="2"
        >控制页面</el-radio>
      </el-radio-group>
    </el-form-item>
    <template v-if="form.type === 2">
      <el-form-item
        label="菜单名称"
        prop="menuName"
      >
        <el-input v-model="form.menuName"></el-input>
      </el-form-item>
      <el-form-item
        label="访问路径"
        prop="path"
      >
        <el-input v-model="form.path"></el-input>
      </el-form-item>
      <el-form-item
        label="路由名称"
        prop="routerName"
      >
        <el-input v-model="form.routerName"></el-input>
      </el-form-item>
      <el-form-item
        label="组件路径"
        prop="component"
      >
        <el-input v-model="form.component">
          <template slot="prepend">@/views/</template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="高亮菜单名称"
        prop="activeMenuTitle"
      >
        <el-input v-model="form.activeMenuTitle"></el-input>
      </el-form-item>
      <el-form-item
        label="高亮菜单路径"
        prop="activeMenu"
      >
        <el-input v-model="form.activeMenu"></el-input>
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
import { createButton, createSubPackage, updateButton, updateSubPackage } from '@/api/authority';
export default {
  name: 'PcBtnContent',
  inject: ['parent'],
  props: {
    btnInfo: {
      type: Object,
      required: true
    },
    type: {
      type: Number,
      required: true
    },
    // 上级菜单数据
    superiorMenuData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set() {
        this.$emit('update:visible', false);
      }
    }
  },
  data() {
    return {
      form: {
        name: '',
        authorityName: '',
        type: 1,
        menuName: '',
        path: '',
        routerName: '',
        component: '',
        activeMenuTitle: '',
        activeMenu: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入功能名称',
            trigger: 'blur'
          }
        ],
        authorityName: [
          {
            required: true,
            message: '请输入功能权限值',
            trigger: 'blur'
          }
        ],
        menuName: [
          {
            required: true,
            message: '请输入菜单名称',
            trigger: 'blur'
          }
        ],
        path: [
          {
            required: true,
            message: '请输入访问路径',
            trigger: 'blur'
          }
        ],
        routerName: [
          {
            required: true,
            message: '请输入路由名称',
            trigger: 'blur'
          }
        ],
        component: [
          {
            required: true,
            message: '请输入组件路径',
            trigger: 'blur'
          }
        ],
        activeMenuTitle: [
          {
            required: true,
            message: '请输入高亮菜单名称',
            trigger: 'blur'
          }
        ],
        activeMenu: [
          {
            required: true,
            message: '请输入高亮菜单路径',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  created() {
    if (this.type === 2) {
      // 修改
      if (this.btnInfo.type === 1) {
        // 仅功能
        let { name, authorityName, type } = this.btnInfo;
        this.form = {
          name,
          authorityName,
          type
        };
      } else {
        // 控制页面
        let { name, authorityName, type } = this.btnInfo;
        let { activeMenuPath, component, pageHeaderName, path, routerName } = this.btnInfo.subPage;
        this.form = {
          name,
          authorityName,
          type,
          menuName: this.btnInfo.subPage.name,
          path,
          routerName,
          component,
          activeMenuTitle: pageHeaderName,
          activeMenu: activeMenuPath
        };
      }
    }
  },
  methods: {
    // 确认
    sureFn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitFn();
        } else {
          return false;
        }
      });
    },
    // 提交
    submitFn() {
      let { name, authorityName, type } = this.form;
      let { id, service_id, service_name } = this.superiorMenuData;

      let btnParams = {
        auth_name: authorityName,
        is_subpackage: type,
        name,
        pid: id,
        service_id,
        service_name
      };

      if (this.type === 1) {
        // 新增
        if (type === 1) {
          // 仅功能
          createButton(btnParams).then(res => {
            this.operateFn(res);
          });
        } else {
          // 控制页面
          createButton(btnParams).then(res => {
            let btn_id = res.data.id;
            let { menuName, path, routerName, component, activeMenuTitle, activeMenu } = this.form;
            createSubPackage({
              btn_id,
              component_uri: component,
              head_name: activeMenuTitle,
              is_hidden: 1,
              menu_uri: activeMenu,
              name: menuName,
              pid: id,
              req_uri: path,
              router_name: routerName,
              service_id,
              service_name
            }).then(res => {
              this.operateFn(res);
            });
          });
        }
      } else {
        // 修改
        btnParams.id = this.btnInfo.id;
        if (type === 1) {
          // 仅功能
          updateButton(btnParams).then(res => {
            this.operateFn(res);
          });
        } else {
          // 控制页面
          updateButton(btnParams).then(res => {
            let btn_id = res.data.id;
            let { menuName, path, routerName, component, activeMenuTitle, activeMenu } = this.form;
            updateSubPackage({
              btn_id,
              id: this.btnInfo.subPage.id,
              component_uri: component,
              head_name: activeMenuTitle,
              is_hidden: 1,
              menu_uri: activeMenu,
              name: menuName,
              pid: id,
              req_uri: path,
              router_name: routerName,
              service_id,
              service_name
            }).then(res => {
              this.operateFn(res);
            });
          });
        }
      }
    },
    // 操作
    operateFn(res) {
      this.$toast(res.message);
      this.$store.commit('appMenu/setPcTimestamp', new Date().getTime());
      this.$emit('closeFn');
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding-top: 10px;
  padding-bottom: 15px;
}

::v-deep .el-form-item {
  &:last-of-type {
    margin-bottom: 0;
  }

  .el-select {
    width: 100%;
  }
}
</style>
